<template>
  <div>
    <Search :query-model="queryModel" :search-show="isShowSearch" @onSearch="onSearch" @onResetForm="onResetForm">
      <template v-slot:search_from_input><slot name="search_from_input" /></template>
    </Search>
    <div class="complex_table ">
      <el-card class="box-card ">
        <div class="mar_bottom_10  complex_table_btn">
          <div class="">
            <el-row>
              <el-button v-permission="createPermission" class="pan-btn green-btn" icon="el-icon-circle-plus-outline" @click="onAddPage">新增</el-button>
              <slot name="listButton" />
            </el-row>
          </div>
          <div>
            <el-button-group>
              <el-button v-if="queryModel" icon="el-icon-search" @click="isShowSearch=!isShowSearch" />
              <el-button icon="el-icon-refresh" @click="onRefresh" />
              <el-dropdown v-if="tableColumnIsShow" trigger="click">
                <el-button icon="el-icon-arrow-down" />
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(k,v,index) of tableColumnIsShow" :key="index"><el-checkbox v-model="k.isShow">{{ k.label }}</el-checkbox></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-button-group>
          </div>
        </div>

        <Table v-loading="loading" :table-data="tableData" :table-row-key="tableRowKey">
          <template v-slot:table_column><slot name="table_column" /></template>
        </Table>
        <div v-if="showPage" class="page">
          <el-pagination
            background
            :page-sizes="page.pageSizes"
            :page-size="page.size"
            :page-count="page.pages"
            :current-page="page.current"
            :layout="page.layout"
            :total="page.total"
            @size-change="sizeChange"
            @current-change="currentChange"
          />
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import permission from '@/directive/permission/index.js'
import Search from './Search/index'
import Table from './Table/index'
import deepcopy from 'deepcopy'
import { mapGetters } from 'vuex'
export default {
  name: 'ComplexTable',
  directives: {
    permission
  },
  components: { Table, Search },
  props: {
    createPermission: { type: Array, default: () => [] },
    searchShow: { type: Boolean, default: true },
    queryModel: { type: Object, default: () => {} },
    tableColumnIsShow: { type: Object, default: () => {} },
    showPage: { type: Boolean, default: true },
    tableRowKey: { type: String, default: 'id' }
  },
  data() {
    return {
      isShowSearch: this.searchShow,
      loading: false,
      page: null,
      tableData: [],
      refreshQueryModel: {
        queryModel: {},
        page: {}
      }
    }
  },
  computed: {
    ...mapGetters(['defaultPage'])
  },
  created() {
    this.page = deepcopy(this.defaultPage)
  },
  mounted() {
    this.onSearch()
  },
  methods: {
    onSearch() {
      const from = {}
      this.refreshQueryModel.queryModel = deepcopy(this.queryModel)
      const { current, size } = deepcopy(this.page)
      this.refreshQueryModel.page = { current, size }
      Object.assign(from, this.refreshQueryModel.queryModel, this.showPage ? this.refreshQueryModel.page : null)
      this.loading = true
      try {
        this.$nextTick(v => {
          this.$emit('onSearch', from)
        })
      } finally {
        this.loading = false
      }
    },
    /**
     *  @param data 数组
     *  @description  data 中包含的属性值 { pages, total, current, size, content }
     */
    setTableAndPage({ pages = 0, total = 0, current = 1, size = 0, content = [] }) {
      this.tableData = content
      this.page.pages = pages
      this.page.size = size
      this.page.current = current
      this.page.total = total
      this.loading = false
    },
    setTable(data = []) {
      this.tableData = data
      this.loading = false
    },
    onRefresh() {
      const from = {}
      Object.assign(from, this.refreshQueryModel.queryModel, this.refreshQueryModel.page)
      for (const k in this.refreshQueryModel.fromModel) {
        this.queryModel[k] = deepcopy(this.refreshQueryModel.queryModel[k])
      }
      this.$emit('onSearch', from)
    },
    sizeChange(pageSize) {
      this.page.size = pageSize
      this.onSearch()
    },
    currentChange(current) {
      this.page.current = current
      this.onSearch()
    },
    onAddPage() {
      this.$emit('onAddPage')
    },
    onResetForm(ref) {
      this.$emit('onResetForm', ref)
    }
  }
}
</script>

<style lang="scss">
 .page{
   margin: 10px auto;
   text-align: center;
 }
 .complex_table{
   .el-button-group {
     >.el-dropdown{
       >.el-button{
         border-left-color:  #DCDFE6;
       }
     }
   }
 }

</style>
